<template>
  <div>
    <div id="map" ref="map" style="height: 400px" />
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import * as echarts from "echarts";
import chinaJsonData from "../../static/json/china.json";

import axios from "axios";
// import { companyCount } from "@/api/countList/apis";

const map = ref<HTMLElement>();

const isreturn = ref(false); // 是否显示返回全国地图按钮

let mapChart: echarts.ECharts | null = null; //地图对象
let mapOption: any = null; //地图属性

const getMap = async () => {
  //地图

  // const res = await companyCount();

  // let dataList = res.data.map((item: any) => ({
  //   name: item.name,
  //   value: item.lngLat.split(",").map(Number),
  //   count: item.count,
  // }));

  if (!mapChart) {
    mapChart = echarts.init(map.value);
  }
  mapOption = {
    // 背景颜色
    backgroundColor: "#ffffff",
    // 提示浮窗样式
    tooltip: {
      show: true,
      trigger: "item",
      formatter: (params: any) => {
        const cityName = params.data.name;
        // 查找对应城市的数据
        const cityData = dataList.find((item: any) => item.name === cityName);
        // 获取机构数
        const institutionCount = cityData ? cityData.count : "0";
        return `当前城市: ${cityName}<br>机构数: ${institutionCount}`;
      },
      alwaysShowContent: false,
      backgroundColor: "#ffffff",
      borderColor: "rgba(0, 0, 0, 0.16);",
      hideDelay: 100,
      triggerOn: "mousemove",
      enterable: true,
      textStyle: {
        color: "#9b9b9b",
        fontSize: "12",
        width: 20,
        height: 30,
        overflow: "break",
      },
      showDelay: 100,
    },
    map: "china",
    roam: true, //是否启缩放和平移
    scaleLimit: {
      min: 1,
      max: 5,
    },
    label: {
      normal: {
        show: true,
        fontSize: "10",
        color: "#fff",
      },
    },
    // 地图配置
    geo: {
      map: "china",
      nameMap: {
        新疆维吾尔自治区: "新疆",
        内蒙古自治区: "内蒙古",
        西藏自治区: "西藏",
      },
      label: {
        // 通常状态下的样式
        normal: {
          show: false,
          textStyle: {
            color: "red",
          },
        },
        // 鼠标放上去的样式
        emphasis: {
          textStyle: {
            color: "#0d2033",
          },
        },
      },
      // 地图区域的样式设置
      itemStyle: {
        normal: {
          borderColor: "#8ee7f8",
          borderWidth: 1,
          areaColor: {
            type: "radial",
            x: 0.5,
            y: 0.5,
            r: 0.8,
            colorStops: [
              {
                offset: 0,
                color: "rgba(64, 158, 255)", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(64, 158, 255)", // 100% 处的颜色
              },
            ],
            globalCoord: false, // 缺省为 false
          },
          shadowColor: "#3c74c1",
          shadowOffsetX: -2,
          shadowOffsetY: 2,
          shadowBlur: 10,
        },
        // 鼠标放上去高亮的样式
        emphasis: {
          areaColor: "#fcdc30",
          borderWidth: 0,
        },
      },
    },
    series: [
      {
        name: "站点信息",
        coordinateSystem: "geo",
        type: "scatter",
        geoIndex: 0,
        label: {
          show: true,
          color: "#0c1a29",
          formatter: "{b}",
          align: "left",
          verticalAlign: "middle", // 设置文字垂直对齐方式为居中
          padding: [0, 0, 0, 10],
        },
        itemStyle: {
          normal: {
            color: "#d81621",
          },
          emphasis: {
            borderColor: "#fff",
            borderWidth: 1,
            opacity: 0.5,
          },
        },
        symbolSize: 15,
        // data: dataList,
      },
    ],
  };
  // 地图注册，第一个参数的名字必须和option.geo.map一致
  echarts.registerMap("china", chinaJsonData as any);
  mapChart.setOption(mapOption);

  mapChart.on("click", (params) => {
    console.log("地区名称1111", params.name);
    getProvinceJson(params.name);
  });
};
let province: Record<string, string> = {
  china: "china",
  黑龙江: "./static/json/hlj.json",
  新疆: "./static/json/xj.json",
};
const getProvinceJson = async (name: string) => {
  let url = province[name];
  const res = await axios.get(url).catch(() => {});
  if (!res) return;

  mapChart?.clear();
  mapOption.geo.map = "Pmap";

  echarts.registerMap("Pmap", res?.data);
  mapChart?.setOption(mapOption);
};

// 地图坐标

onMounted(() => {
  // getCompanyCount();
  getMap();
});

onBeforeUnmount(() => {
  mapChart?.dispose();
});
</script>

<style></style>
